<template>
    <div class="error">
        <svg
            v-if="icon"
            class="error__icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            :width="size"
            :height="size"
        >
            <path
                d="M512 64a448 448 0 1 1 0 896A448 448 0 0 1 512 64zM333.824 237.632L243.328 328.128 424.32 509.12l-183.872 183.872 90.56 90.56L514.88 599.68l180.992 180.992 90.496-90.496-180.992-181.056 178.176-178.112-90.56-90.56-178.112 178.176-181.12-180.992z"
                :fill="fill"
            ></path>
        </svg>

        <slot>
            <p :class="$classNames('error__message')" :style="{ color: fill }">{{ message }}</p>
        </slot>
    </div>
</template>

<script>
export default {
    name: 'CommonError',

    props: {
        icon: {
            type: Boolean,
            default: true
        },

        fill: {
            type: String,
            default: '#fe694a'
        },

        size: {
            type: Number,
            default: 36
        },

        error: {
            type: [Error, String],
            default: ''
        }
    },

    computed: {
        message() {
            if (typeof this.error === 'string') return this.error;
            return this.error.message;
        }
    }
};
</script>

<style scoped lang="scss">
@import '~@isyscore/styles/variables';

.error {
    text-align: center;
    min-width: 50px;
    min-height: 50px;
    margin: 100px auto;
    padding: 12px;

    &__icon {
        margin-bottom: 12px;
    }

    &__message {
        font-size: 12px;
        font-weight: 400;
    }
}
</style>
